<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
  <div class="am-modal-dialog">
    <div class="am-modal-hd title">MyFightPix</div>
    <div class="am-modal-bd text">
      Hello world！
    </div>
    <div class="am-modal-footer">
      <span data-am-modal-confirm class="am-modal-btn">OK</span>
    </div>
  </div>
</div>
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">MyFightPix</div>
    <div class="am-modal-bd text">
      你确定要删除这条记录吗？
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-confirm>OK</span>
      <span class="am-modal-btn" data-am-modal-cancel>Cancle</span>
    </div>
  </div>
</div>
<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">Uploading...</div>
    <div class="am-modal-bd">
      <span class="am-icon-spinner am-icon-spin"></span>
    </div>
  </div>
</div>
<footer>
copy right 2016 All right reserved.
</footer>

<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="/js/polyfill/rem.min.js"></script>
<script src="/js/polyfill/respond.min.js"></script>
<script src="/js/amazeui.legacy.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/js/jquery.min.js"></script>
<script src="/js/amazeui.min.js"></script>
<!--<![endif]-->
<script src="/js/app.js"></script>
<script type="text/javascript" src='/js/main.js'></script>
</body>
</html>

<script type="text/javascript">

$(function(){
  $("#banner .avatar img").click(function(){
    $("#doc-form-file").click();
  });
	$("#doc-form-file").on("change",function(e){
    uploadAvatar(this.files[0]);
	});
})

function uploadAvatar(file) {
  var $load = $("#my-modal-loading");
	if(!/image\/\w+/.test(file.type)){
    alert("File's type error！");
    return false;
  }
	var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(e){
			$("#banner .avatar img").attr("src",this.result);
    }
	$load.modal('open');
	var fd = new FormData();
	fd.append("uploadImg", file);
	var xhr = new XMLHttpRequest();
	xhr.upload.addEventListener("progress", function(evt){
		if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded/ evt.total);
      //progress.set(percentComplete);
    }
	}, false);
	xhr.addEventListener("load", function(evt){
		var img=eval('('+evt.target.responseText+')');
		console.log(evt.target.responseText);
		if(img.success){
      console.log(img.id);
			<% if(user){ %>
        setAvatar(img.id,"<%= user.id %>");
      <% }else{ %>
        $load.modal('close');
        mAlert({title:"Tips",text:"Success！"});
      <% } %>
		}else{
      $load.modal('close');
			mAlert({title:"Error",text:img.msg});
		}
	}, false);
	xhr.addEventListener("error", function(evt){
		$load.modal('close');
		mAlert({title:"Error",text:"Failed！"});
	}, false);
	xhr.addEventListener("abort", function(evt){
		$load.modal('close');
	}, false);
	xhr.open("POST", "/admin/uploadImg");
	xhr.send(fd);
}

function setAvatar(image,uid){
  $.post("/my/setavatar",{
    image:image,
    uid:uid
  },function(result){
    var $load = $("#my-modal-loading");
    $load.modal('close');
  },"json");
}
</script>
